<template>
  <el-rate
    :disabled="ui.disabled"
    :allowHalf="ui.allowHalf"
    :max="ui.max"
    :colors="ui.colors"
    :voidColor="ui.voidColor"
    :disabledVoidColor="ui.disabledVoidColor"
    :icons="ui.icons"
    :showText="ui.showText"
    :showScore="ui.showText ? false : ui.showScore"
    :textColor="ui.textColor"
    :texts="ui.texts"
    :scoreTemplate="ui.scoreTemplate"
    :modelValue="val"
    @update:model-value="updateValue"
  />
</template>

<script lang="ts" setup name="lc-sf-rate">
import { computed, inject } from "vue";
import { RateUI } from "../interface";
import { SFService } from "../sf.service";
import { TItemOption } from "../type";
const props = defineProps<TItemOption<RateUI>>();
const sf = inject<SFService>("sf-service");
const val = computed(() => {
  return sf.getVaule(props.keyPath);
});
const ui = props.service.getUI<RateUI>();
const updateValue = (val: number) => {
  if (ui.change) {
    ui.change(val);
  }
  sf.setVaule(props.keyPath, val);
};
</script>

<style></style>
../types
